<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Home from './Home.vue';

const money = ref<number>(100);

const homeRef = ref<null | InstanceType<typeof Home>>(null);

onMounted(() => {
  setTimeout(() => {
    // 目的：想要触发这个子组件的某个自定义事件
    // homeRef.value?.$emit('changeMoney', 300);

    // homeRef.value?.onChangeMoney?.(400)
    // homeRef.value?.onChangeMoney!(400) // 函数的非空断言，不要 !.()，只要 !() 就行了
    // 如果你确定这个函数一定存在，可以用非空断言
    // 这其实是在调用子组件身上的方法~~~~   相当于在人资中使用 el-form 调用其 validate 验证表单方法一样
    homeRef.value?.onChangeMoneyOfHome(400);
  }, 3000);
});

const onChangeMoneyOfApp = (eventData: number) => {
  money.value = eventData;
};
</script>

<template>
  <div>money: {{ money }}</div>
  <hr />
  <Home ref="homeRef" :money="money" @changeMoney="onChangeMoneyOfApp" />
</template>
